<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="../../lib/html5shiv.js?rev=@@hash"></script>
    <script type="text/javascript" src="../../lib/respond.min.js?rev=@@hash"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../../../lib/Hui-iconfont/1.0.8/iconfont.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="../../lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>客户组管理</title>
    <style type="text/css">
        .Content_big{
            padding-left: 80px;
            background: #fff;
            font-size: 16px;
            padding-bottom: 30px;
        }
        .AllTop{
            width: 80%;
            display: flex;
            justify-content: space-around;
            align-content: center;
            align-items: center;
            height: 50px;
            border-bottom: 1px solid #000;
        }
        h4{
            padding: 20px 0px;
            margin: 0;
            font-weight: bold;
        }
        input[type="text"]{
            width: 200px;
            border: 1px solid #333;
        }
        input[type="radio"]{
            margin-left: 40px;
            margin-top: 0px;
            margin-right: 4px;
        }
        select{
            width: 150px;
        }
        .mustInput{
            color: red;
            padding: 5px;
        }
        .ShuCaiKH,.ShuCaiPt,.KeHuPt{
            display: none;
        }
        button{
            width: 120px;
            height: 38px;
            background: none;
            border: 1px solid #333;
            border-radius: 5px;
            margin-left: 30px;
        }
        .ShuCaiKH,.KeHuPt,.ShuCaiPt{
            padding: 30px;
        }
        .ShuCaiKH div{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            margin-bottom: 10px;
        }
        .KeHuPt > div{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            margin-bottom: 10px;
        }
        .ShuCaiPt div{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            margin-bottom: 10px;
        }
        .KeHuPt ul{
            list-style: none;
        }
    </style>
</head>
<body data-id="184" style="line-height: 2.6">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 
        首页  <span class="c-gray en">&gt;</span>
        会员管理<span class="c-gray en">&gt;</span>
        客户组管理<span class="c-gray en">&gt;</span>
        新增客户组<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i></a></nav>
<article class="page-container">
    <div class="Content_big">
        
        <div class="AllTop">
            <div style="margin-left:10px;"><span class="mustInput">*</span>客户组类型：</div>
            <div> <input type="radio" name="customerType" value="10" checked>数采客户组</div>
            <div> <input type="radio" name="customerType" value="20">Punch-Out，数采平台审批</div>
            <div> <input type="radio" name="customerType" value="30">Punch-Out，客户平台审批</div>
        </div>
        
        <div class="ShuCaiKH" style="display: block;">
            <form id="ShuCaiKH">
                <div><span class="mustInput">*</span>客户组名称：<input name="mainCustomerName" type="text" id="name"/></div>
            </form>
        </div>

        <div class="ShuCaiPt">
            <form id="ShuCaiPt">
                <div><span class="mustInput">*</span>客户组名称：<input type="text" name="mainCustomerName"/></div>
                <div><span class="mustInput">*</span>对接项目：<input type="radio" name="acceptProject" value="10" disabled>是<input type="radio" name="acceptProject" checked disabled value="20">否</div>
                <div><span class="mustInput">*</span>对接手机号：<input type="radio" name="acceptTelephone" value="10">是<input type="radio" name="acceptTelephone" value="20">否</div>
                <div><span class="mustInput">*</span>对接单点登录：<input type="radio" name="acceptLogin" value="10">是<input type="radio" name="acceptLogin" value="20">否</div>
            </form>
        </div>

        <div class="KeHuPt">
            <form id="KeHuPt">
                <h4>客户账号相关</h4>
                <div><span class="mustInput">*</span>客户组名称：<input type="text" name="mainCustomerName" /></div>
                <div><span class="mustInput">*</span>对接手机号：<input type="radio" name="acceptTelephone" value="10">是<input type="radio" name="acceptTelephone" value="20">否</div>
                <div><span class="mustInput">*</span>对接单点登录：<input type="radio" name="acceptLogin" value="10">是<input type="radio" name="acceptLogin" value="20">否</div>
                <div style="display: flex; align-items: center;align-content: center;padding: 10px;">
                    <div>默认的审批结算账号：</div>
                    <ul>
                        <li>
                            审批账号 <select name="approveAcount" id="Prover">
                            </select>
                        </li>
                        <li>
                            结算账号 <select name="payAcount" id="Setlement">
                            </select>
                        </li>
                    </ul>
                </div>

                <h4>其他</h4>
                <div><span class="mustInput">*</span>对接审批业务：
                    <input type="radio" name="acceptApprove" value="10">整单审批
                    <input type="radio" name="acceptApprove" value="20">部分审批-商品行
                    <input type="radio" name="acceptApprove" value="30">部分审批-商品数量
                </div>
                <div><span class="mustInput">*</span>对接订单状态：<input type="radio" name="acceptOrder" value="10">是<input type="radio" name="acceptOrder" value="20">否</div>
                <div><span class="mustInput">*</span>对接确认收货：<input type="radio" name="acceptConfirm" value="10">是<input type="radio" name="acceptConfirm" value="20">否</div>
                <div><span class="mustInput">*</span>对接退货单状态：<input type="radio" name="acceptReturn" value="10">是<input type="radio" name="acceptReturn" value="20">否</div>
            </form>
        </div>
        <div>
            <button style="margin-left: 30%;" onclick="closeLayer()">取消</button>
            <button style="background:rgba(22, 155, 213, 1);color:#fff;border-color: rgba(22, 155, 213, 1);" onclick="saveAccount()">保存</button>
        </div>
    </div>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script>
<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../lib/jquery.jedate.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../../lib/jquery.validation/1.14.0/jquery.validate.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/jquery.validation/1.14.0/validate-methods.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/jquery.validation/1.14.0/messages_zh.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script src="../../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<script src="../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../ht-js/Project.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../ht-js/frame/doT.min.js?rev=@@hash"></script>
<!--引入分页-->
<link rel="stylesheet" href="../../../lib/pagination/pagination.css">
<script src="../../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script src="../../../ht-js/Customer/accountAystem/notice.js?rev=@@hash"></script>
<script src="../../../ht-js/Customer/accountAystem/signingAccountcreation.js?rev=@@hash"></script>
<script>
    let customerType = 10
    if(!!sessionStorage.getItem("mainCustomerId")){
        let params = {
            ids:sessionStorage.getItem("mainCustomerId")
        }
        SelectDom()
        setTimeout(() => {
            $.ajax({
                url: root.orderInter.mainCustomerDetails,
                // url: 'https://t.fsyuncai.com/api/admin/amembership/mainCustomer/info',
                cache: false,  //禁用缓存
                type: "POST",
                dataType: 'json',
                contentType: "application/json",
                data: JSON.stringify(params),
                success: function (data) {
                    let Obj = {...data.data,...data.data.mainCustomerSettingsEntity}
                    $('input[type=radio][name=customerType]').attr("disabled",true); 
                    // $('input[type=radio][name=acceptProject]').attr("disabled",true); 
                    // 数据回填
                    Object.entries(Obj).forEach((item) => {
                        // $('input[name=`${item[0]}"`]').val(item[1])
                        if([10,20,30].includes(item[1])){
                            $("input[name='" +item[0]+ "'][value='"+ item[1] +"']").attr("checked",true); 
                        }else if(['approveAcount','payAcount'].includes(item[0])){
                            let opValue = ''
                            if(item[0] == 'approveAcount'){
                                let index = Obj.approveAcount.indexOf('（')
                                let newAccount = index !== -1 ? Obj.approveAcount.substring(0,index) : Obj.approveAcount
                                opValue = Obj.approveMemberId + ',' + newAccount
                            }else{
                                let index = Obj.payAcount.indexOf('（')
                                let newAccount = index !== -1 ? Obj.payAcount.substring(0,index) : Obj.payAcount
                                opValue = Obj.payMemberId + ',' + newAccount
                            }
                            console.log(opValue)
                            $("select[name='"+ item[0] +"'] option[value='"+ opValue +"']").attr("selected", true);
                        }else{
                            $('input[name="'+item[0]+'"]').val(item[1])
                        }
                        
                    })
                    // 初次显示
                    customerType = Obj.customerType
                    $('.ShuCaiKH,.ShuCaiPt,.KeHuPt').css('display','none')
                    if(Obj.customerType == 10){
                        $('.ShuCaiKH').css('display','block')
                    }else if(Obj.customerType == 20){
                        $('.ShuCaiPt').css('display','block')
                    }else{
                        $('.KeHuPt').css('display','block')
                    }
                },
                error: function () {
                    $.Huimodalalert('获取失败！', 2000);
                }
            });
        },200)
    }
    
    // return
    // 单选框变化时 替换视图
    $('input[type=radio][name=customerType]').change(function () {
        $('.ShuCaiKH,.ShuCaiPt,.KeHuPt').css('display','none')
        let Myvalue = $(this).val()
        customerType = Myvalue
        if(Myvalue == 10){
            $('.ShuCaiKH').css('display','block')
        }else if(Myvalue == 20){
            $('.ShuCaiPt').css('display','block')
        }else{
            $('.KeHuPt').css('display','block')
        }
    });

    $('#name').change(function(){
        console.log($(this).val())
    })
    
    function SelectDom(){
        let params = {
            pageNum: 1,
            pageSize: 30000,
            mainCustomerId:sessionStorage.getItem("mainCustomerId"),
            status:10
        }
        $.ajax({
            url: root.orderInter.getConstorUserList,
            // url: 'https://t.fsyuncai.com/api/admin/amembership/member/getMembers',
            cache: false,  //禁用缓存
            type: "POST",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(params),
            success: function (data) {
                let Select = `<option value=""></option>`
                data.data.data.forEach((item) => {
                    let index = item.loginAccount.indexOf('（')
                    let newAccount = index !== -1 ? item.loginAccount.substring(0,index) : item.loginAccount
                    Select += `<option value="${item.memberId},${newAccount}">${newAccount}</option>`
                })
                $('#Prover').html(Select)
                $('#Setlement').html(Select)
            },
            error: function () {
                $.Huimodalalert('失败！', 2000);
            }
        });
    }

    // 点击保存
    function saveAccount(){
        let FormType = customerType == 10 ? "#ShuCaiKH" : customerType == 20 ? '#ShuCaiPt' : '#KeHuPt'
        let FormValue = $(FormType).serializeArray().reduce((pro,item) =>{
            pro[item.name] = item.value
            return pro
        },{})
        if(!!FormValue.payAcount){
            FormValue.payMemberId = FormValue.payAcount.split(',')[0]
            FormValue.payAcount = FormValue.payAcount.split(',')[1]
        }
        if(!!FormValue.approveAcount){
            FormValue.approveMemberId = FormValue.approveAcount.split(',')[0]
            FormValue.approveAcount = FormValue.approveAcount.split(',')[1]
        }
        const {user:{name,user_ID,number}} = JSON.parse(decodeURIComponent(web.readCookie("loginData")))
        let params = {
            status:10,
            createUser: name,
            customerType: customerType,
            mainCustomerName: FormValue.mainCustomerName,
            mainCustomerSettingsEntity:{
                operateName: name,
                operateUserId: user_ID,
                operateAcount: number,
                acceptProject: 20,
                ...FormValue
            }
        }
        let arr = ['mainCustomerName']
        let arr1 = ['mainCustomerName','acceptTelephone','acceptLogin']
        let arr2 = ['mainCustomerName','acceptTelephone','acceptLogin','acceptApprove','acceptOrder','acceptConfirm','acceptReturn']
        let flag = true
        if(customerType == "10"){
            if(params.mainCustomerSettingsEntity['mainCustomerName'] == ""){
                $.Huimodalalert('请填写完整信息', 2000);
                flag = false
            }
        }else if(customerType == "20"){
            arr1.forEach((item) => {
                if(!params.mainCustomerSettingsEntity[item]){
                    $.Huimodalalert('请填写完整信息', 2000);
                    flag = false
                }
            })
        }else{
            arr2.forEach((item) => {
                if(!params.mainCustomerSettingsEntity[item]){
                    $.Huimodalalert('请填写完整信息', 2000);
                    flag = false
                }
            })
        }
        // 通过存储ID ，判断添加接口还是更新接口
        params.updateUser = !!sessionStorage.getItem("mainCustomerId") ? name : null
        params.mainCustomerId = !!sessionStorage.getItem("mainCustomerId") ? sessionStorage.getItem("mainCustomerId") : null
        if(flag){
            !!sessionStorage.getItem("mainCustomerId") ? UpdateSign(params) : AddSigin(params)
        }
    }
    // 添加 
    function AddSigin(params) {
        $.ajax({
            url: root.orderInter.mainCustomerAdd,
            // url: 'https://t.fsyuncai.com/api/admin/amembership/mainCustomer/save',
            cache: false,  //禁用缓存
            type: "POST",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(params),
            success: function (data) {
                if (data.errorCode == 0) {
                    // $.Huimodalalert('创建成功！', 2000);
                    closeLayer('up')
                } else {
                    showMsg(5, data.msg);
                }
            },
            error: function () {
                $.Huimodalalert('失败！', 2000);
            }
        });
    }

    // 更新
    function UpdateSign(params) {
        $.ajax({
            url: root.orderInter.mainCustomerEdit,
            // url: 'https://t.fsyuncai.com/api/admin/amembership/mainCustomer/update',
            cache: false,  //禁用缓存
            type: "POST",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(params),
            success: function (data) {
                if (data.errorCode == 0) {
                    // $.Huimodalalert('更新成功！', 2000);
                    closeLayer('save')
                } else {
                    showMsg(5, data.msg);
                }
            },
            error: function () {
                $.Huimodalalert('失败！', 2000);
            }
        });
    }

    //弹框
    function showMsg(icon, msg) {
        layer.msg(msg, {
            icon: icon,
            time: 1000
        });
    }
</script>
</body>

</html>